const uiFormControls = require('../ui-form/ui-form-controls');
// index.js
Component({
    behaviors: [uiFormControls],
    options: {
        addGlobalClass: true,
        multipleSlots: true
    },
    relations: {
        '../ui-form/index': {
            type: 'ancestor', // 关联的目标节点应为祖先节点
        }
    },
    /**
     * 组件的属性列表
     */
    properties: {
        disabled: {
            type: Boolean,
            value: false
        },
        validate: {
            type: Boolean,
            value: false
        },
        labelWidth: {
            type: Number,
            value: 0
        },
        label: {
            type: String,
            value: ''
        },
        name: {
            type: String,
            value: ''
        },
        data: {
            type: Array,
            value: ''
        },
        multiple: {
            type: Boolean,
            value: false
        },
        value: {
            type: Array,
            value: ''
        },
        valueKey: {
            type: String,
            value: 'value'
        },
        valueLabel: {
            type: String,
            value: 'label'
        },
        placeholder: {
            type: String,
            value: '请输入'
        },
        ifSlot: {
            type: Boolean,
            value: false
        },
        border: {
            type: Boolean,
            value: true
        },
        // selector	普通选择器 multiSelector	多列选择器 time	时间选择器 date	日期选择器 region	省市区选择器
        mode: {
            type: String,
            value: false
        },
        // selector	普通下拉选择器 picker 底部弹起的滚动选择器 dialog	弹出选择器
        type: {
            type: String,
            value: 'selector'
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        eventName: 'bindSelect',
        showSelect: false,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        validate: function (value) {
            if (this.data.validate) {
                return this.data.value.length !== 0;
            }
            return true;
        },
        select: function (res) {
            this.setData({
                showSelect: true,
            })
        },
        closeSelect: function () {
            this.setData({
                showSelect: false,
            })
        },
        bindSelect: function (e) {
            const that = this;
            if (that.data.disabled) { return; }
            const value = e.detail.value;
            this.setData({
                value: value
            }, () => {
                that.dataChange({name: that.data.name, value: that.data.value});
            })
        },
        dataChange: function (e) {
            const that = this;
            that.triggerEvent( that.data.eventName , e);
        }
    }
})